<template>
	<div class="form-adapt-container">
		<el-card shadow="hover">
			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="130px" style="width: 500px" class="mt35 mb35">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="网站名称">
							<el-input v-model="formData.site_name" placeholder="请输入权限角色" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="网站标题">
							<el-input v-model="formData.site_name" placeholder="请输入权限角色" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="关键词">
							<el-input v-model="formData.site_name" placeholder="请输入权限角色" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="网站描述">
							<el-input type="textarea" v-model="formData.site_name" placeholder="请输入权限角色" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="站点是否开启">
							<el-radio v-model="formData.siteon" :label="1">开启</el-radio>
							        <el-radio v-model="formData.siteon" :label="0">关闭</el-radio>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item>
							<el-button type="primary">
								<SvgIcon name="iconfont icon-biaodan" />
								更新网站设置
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</div>		
</template>

<script lang="ts">
	import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
	import {ElMessage} from "element-plus";
	
	interface DialogRow {
		id:string;
		site_name: string;
		status: number;
		sort: number;
		remark: string;
	}
	interface RoleState {
		formData: DialogRow;
		rules: object;
	}
	
	export default defineComponent({
		name: 'systemEditRole',
		setup(props,{emit}) {
		const {proxy} = getCurrentInstance() as any;
		const formRef = ref<HTMLElement | null>(null);
		const state = reactive<RoleState>({
			formData: {
				id: "",
				site_name: '',
				status: 1,
				sort: 0,
				remark: '',
			},
			// 表单校验
			rules: {
				site_name: [
					{ required: true, message: "角色名称不能为空", trigger: "blur" },
				]
			}
		});
		const resetForm = ()=>{
			state.formData = {
				id:"",
				site_name: '',
				status: 1,
				sort: 0,
				remark: '',
			}
		};
		return {
			formRef,
				...toRefs(state),
		};
		},
	});
	
</script>

<style>
</style>